<script setup lang="ts">
import type { AppTypeProps } from '@/types';

import { Icon } from '@/components/core/icon';

import { ElButton, ElMessageBox } from 'element-plus';

defineOptions({ name: 'AppIcon' });
const { item } = defineProps<{
  item: AppTypeProps;
}>();
const emits = defineEmits(['edit', 'delete']);
const onDelete = (item: AppTypeProps) => {
  ElMessageBox.confirm('确定删除当前应用吗？', '提示', {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
  })
    .then(() => {
      emits('delete', item);
    })
    .catch(() => {});
};
</script>
<template>
  <div class="app-item">
    <div
      v-if="item.iconType === 'icon'"
      :style="{
        backgroundColor: item.iconBgColor,
        background: item.iconBgImage,
        color: item.iconColor,
      }"
      class="app-icon"
    >
      <Icon :icon="item.icon" alt="" />
    </div>
    <i
      v-else
      :class="item.icon"
      :style="{
        backgroundColor: item.iconBgColor,
        backgroundImage: item.iconBgImage,
        color: item.iconColor,
      }"
      class="iconfont"
    ></i>
    <div class="app-name">{{ item.title }}</div>
    <div class="mask">
      <ElButton size="small" type="primary" @click="emits('edit', item)">
        编辑
      </ElButton>
      <ElButton
        v-if="item.type !== 'system'"
        size="small"
        type="danger"
        @click="onDelete(item)"
      >
        删除
      </ElButton>
    </div>
  </div>
</template>
